<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

  <title>Materialize - Documentation</title>

  <!-- Favicons -->
  <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
  <meta name="msapplication-TileColor" content="#FFFFFF">
  <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
  <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">

  <!-- Android 5 Chrome Color -->
  <meta name="theme-color" content="#EE6E73">

  <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<!--  <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />-->
<!--  <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>-->
  <link href="../../../css/prism.css" rel="stylesheet" />
  <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>

<div style="padding-right: 300px;">
<h3>Badges</h3>

  <h4>Collection</h4>
  <div class="row">
    <div class="col s4">
      <div class="collection">
        <a href="#!" class="collection-item"><span class="badge">1</span>Alan</a>
        <a href="#!" class="collection-item"><span class="new badge">4</span>Alan</a>
        <a href="#!" class="collection-item"><span class="new badge blue">4</span>Alan</a>
        <a href="#!" class="collection-item"><span class="new badge black-text">4</span>Alan</a>
        <a href="#!" class="collection-item">Alan</a>
        <a href="#!" class="collection-item"><span class="badge">14</span>Really long text Really long text Really long text Really long text Really long text Really long text</a>
        <a href="#!" class="collection-item"><span class="new badge">4</span>Really long text Really long text Really long text Really long text Really long text Really long text</a>

      </div>
    </div>
  </div>

  <h4>Dropdown</h4>
  <div class="row">
    <div class="col s4">
      <ul id="dropdown2" class="dropdown-content">
        <li><a href="#!">one<span class="badge">1</span></a></li>
        <li><a href="#!">two<span class="new badge">1</span></a></li>
        <li><a href="#!">two<span class="new badge blue">1</span></a></li>
        <li><a href="#!">two<span class="new badge black-text">1</span></a></li>
        <li><a href="#!">three</a></li>
        <li><a href="#!"><span class="badge">1</span>Really long text Really long text Really long text Really long text Really long text Really long text</a></li>
        <li><a href="#!"><span class="new badge">1</span>Really long text Really long text Really long text Really long text Really long text Really long text</a></li>
      </ul>
      <a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>
    </div>
    <div class="col s4">
      <ul id="dropdown3" class="dropdown-content">
        <li><a href="#!">one<span class="badge">1</span></a></li>
        <li><a href="#!">two<span class="new badge">1</span></a></li>
        <li><a href="#!">two<span class="new badge blue">1</span></a></li>
        <li><a href="#!">two<span class="new badge black-text">1</span></a></li>
        <li><a href="#!">three</a></li>
        <li><a href="#!">Really long text Really long text Really long text Really long text Really long text<span class="badge">1</span></a></li>
        <li><a href="#!">Really long text Really long text Really long text Really long text Really long text<span class="new badge">1</span></a></li>


      </ul>
      <a class="btn dropdown-button" href="#!" data-constrainwidth="false" data-activates="dropdown3">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>
    </div>
  </div>

  <h4>Nav</h4>
  <nav>
    <div class="nav-wrapper">
      <a href="" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="">sass</a></li>
        <li><a href="">sass <span class="new badge">4</span></a></li>
        <li><a href="">sass <span class="new badge blue">4</span></a></li>
        <li><a href="">sass <span class="new badge black-text">4</span></a></li>
        <li><a href="">sass <span class="badge">4</span></a></li>
      </ul>
    </div>
  </nav>
  </div>

  <ul id="slide-out" class="side-nav fixed" style="right: 0; left: auto;">
    <li>
    <a href="#!">Orders <span class="new badge">4</span></a>
    </li>
    <li>
    <a href="#!">Second Sidebar Link <span class="badge">4</span></a>
    </li>
  </ul>

  <h4>Collapsible</h4>
  <div class="row">
    <div class="col s4">
      <ul class="collapsible" data-collapsible="accordion">
        <li>
          <div class="collapsible-header"><i class="material-icons">filter_drama</i>Very long title Very long title Very long title Very long title Very long title<span class="new badge">4</span></div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="material-icons">filter_drama</i>Very long title Very long title Very long title Very long title Very long title<span class="new badge blue">4</span></div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="material-icons">filter_drama</i>Very long title Very long title Very long title Very long title Very long title<span class="new badge black-text">4</span></div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="material-icons">place</i>Very long title Very long title Very long title Very long title Very long title<span class="badge">1</span></div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
          <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
          <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
      </ul>
    </div>
  </div>



<!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="../../../bin/materialize.js"></script>
<!--     <script src="js/velocity.min.js"></script>-->
<!--  <script src="js/leanModal.js"></script>-->

  <script>
    $(document).ready(function(){
        $('select').material_select();
    });
  </script>

</body>
</html>
